/**
 *
 * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓        ┃ ┃ statusBarHeight 状态栏高度
 * ┃                            _______   ┃        ┃ menuBottonTop 胶囊距离顶部的高度
 * ┃ <           XXX           (_______)  ┃      ┃ menuBottonHeight 胶囊本身的高度
 * ┃                                      ┃     ┃ 胶囊底部距离导航栏的分界线设置为：menuBottonTop - statusBarHeight
 * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 *
 * 导航栏高度为：navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2
 */


import Taro from '@tarojs/taro';
import {Text, View, Image} from '@tarojs/components';
import {Component} from 'react'
import './index.scss'
import '../../images/public/style.css'
import {getBrowserController} from '../utils';
import homeIcon from "./home.png"

const browserController = getBrowserController()

export default class LgNavCustomBar extends Component {

  static defaultProps = {
    isTitlePositionLeft: true
  }

  constructor(props) {
    super(props)

    let statusBarHeight;
    let navBarHeight;
    if (process.env.TARO_ENV === 'weapp') {
      var menuButtonObject = wx.getMenuButtonBoundingClientRect()
      var sysinfo = wx.getSystemInfoSync()
      statusBarHeight = sysinfo.statusBarHeight;
      let menuBottonHeight = menuButtonObject.height;
      let menuBottonTop = menuButtonObject.top;
      navBarHeight = 5 + statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2;
      // navBarHeight = Taro.pxTransform(106 * 1.5);
      console.log(navBarHeight)
      statusBarHeight += "px";
    } else {
      statusBarHeight = browserController.getStatusBarHeight() + "px";
      navBarHeight = Taro.pxTransform(106);
    }
    this.state = {
      navBarHeight,
      statusBarHeight
    }

    this.goBackPage = this.goBackPage.bind(this);
    this.goMainPage = this.goMainPage.bind(this);
  }

  goBackPage() {
    if (this.props.onClick) {
      this.props.onClick();
    } else {
      Taro.navigateBack({
        delta: 1
      })
    }
  }

  goMainPage() {
    if (this.props.goMainPage) {
      this.props.goMainPage();
    } else {
      if (browserController) {
        browserController.goHome();
      }
    }
  }

  render() {
    let {needBackIcon = true, mainTitle = '', needMainIcon = false, className = '', style = {}} = this.props
    let titlePosition = this.props.isTitlePositionLeft
    let mainTitleBold = this.props.mainTitleBold
    if (process.env.TARO_ENV === 'weapp') {
      needMainIcon = false
    }
    style.height = this.state.navBarHeight;
    style.paddingTop = this.state.statusBarHeight;
    style.boxSizing = (process.env.TARO_ENV === 'weapp') ? "border-box" : "content-box";
    return (
      <View
        className={`nav_custom_bar ${className} ${titlePosition ? "bar_title_left" : "bar_title_center"} ${mainTitleBold ? "main-title-bold" : ""}`}
        style={style}>
        {needBackIcon ?
          <View className="nav_custom_bar_back" onClick={this.goBackPage}>
            <View className="icon-b00401"></View>
          </View> : null}
        {titlePosition ?
          <Text className='nav_custom_bar_title bar_title_marginLeft' onClick={this.goBackPage}>{mainTitle}</Text>
          :
          <Text className='nav_custom_bar_title'>{mainTitle}</Text>
        }
        {needMainIcon ?
          <View className="nav_custom_bar_main_page_warp" onClick={this.goMainPage}>
            <Image mode="aspectFill" className="nav_custom_bar_main_page" src={homeIcon}/>
            {/*<View className="nav_custom_bar_main_page"></View>*/}
          </View> :
          <View className="nav_custom_bar_main_page_warp">
            <View className="nav_custom_bar_main_page"/>
          </View>
        }
        {
          this.props.children ?
            <View className="nav_custom_bar_main_page_warp nav_custom_bar_other"
                  style={{paddingTop: this.state.statusBarHeight}}>
              {this.props.children}
            </View> : null
        }
      </View>
    )
  }
}
